<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../layui/font/iconfont.woff">
    <style>
          * {
      margin: 0;
      padding: 0;
    }
    .clear::after{
            content: "";
            display: block;
            clear: both;
        }
    #show {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #tabdiv {
      width: 100%;
      background-color: white;
      overflow: hidden;
    }

    #tabdiv>p {
      width: 100%;
      padding: 20px 10px;
      background-color: rgb(236, 239, 241);
    }

    #tabdiv>table {
      width: 100%;
      text-align: center;
    }

    #addbtn {
      margin: 1%;
    }

    tr {
      border: 1px solid gainsboro;
      height: 50px;
    }

    #DIB {
      width: 100px;
      border: 1px solid gray;
      background-color: rgba(1, 1, 1, 0);
      padding: 5px 0;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 2px;
    }

    #test1 {
      float: right;
    }

    #tanchukuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
      display: none;
    }
    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #popup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #popup_box>p {
      padding: 14px 0;
      width: 100%;
      padding: 20px 0;
      margin-bottom: 1.5%;
      background-color: rgb(236, 239, 241);
    }

    #popup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 80%;
      border-radius: 2px;
    }
      /* 修改区域 */
    #popup_box>div{
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px dashed black;
      margin-bottom: 2%;
    }
    #popup_box>div>h3{
      color: #1ab394;
      font-weight: 800;
    }
    #popup_box>div>div{
      width: 100%;
      margin: 2% 0;
      padding-left: 10%;
      box-sizing: border-box;
    }
    #popup_box>div>div>span {
      display: inline-block;
      width: 10%;
      text-align: right;
      margin-right: 2%;
    }
    #popup_box>div input ,#popup_box>div select{
      display: inline-block;
      width: 20%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid black;
      padding-left: 10px;
    }
    #popup_box>div>div>span:nth-of-type(2){
      margin-left: 20%;
    }

    #tijiao {
      margin-left: 43%;
    width: 6%;
    height: 38px;
    }

    #chongzhi {
      border: 1px solid black;
    box-sizing: border-box;
    width: 6%;
    height: 38px;
    background-color: white;
    color: black;
    }
/*================== 修改框==================== */
    #xiugaikuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
      display: none;
    }

    #xgtubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #xgtubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #xgpopup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #xgpopup_box>p {
      padding: 14px 0;
      width: 100%;
      padding: 20px 0;
      margin-bottom: 1.5%;
      background-color: rgb(236, 239, 241);
    }

    #xgpopup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 80%;
      border-radius: 2px;
    }
      /* 修改区域 */
    #xgpopup_box>div{
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px dashed black;
      margin-bottom: 2%;
    }
    #xgpopup_box>div>h3{
      color: #1ab394;
      font-weight: 800;
    }
    #xgpopup_box>div>div{
      width: 100%;
      margin: 2% 0;
      padding-left: 10%;
      box-sizing: border-box;
    }
    #xgpopup_box>div>div>span {
      display: inline-block;
      width: 10%;
      text-align: right;
      margin-right: 2%;
    }
    #xgpopup_box>div input ,#xgpopup_box>div select{
      display: inline-block;
      width: 20%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid black;
    }
    #xgpopup_box>div>div>span:nth-of-type(2){
      margin-left: 20%;
    }

    #xiugai {
      margin-left: 43%;
    width: 6%;
    height: 38px;
    }

    #xgchongzhi {
      border: 1px solid black;
    box-sizing: border-box;
    width: 6%;
    height: 38px;
    background-color: white;
    color: black;
    }
    #tjchongzhi {
      border: 1px solid black;
    box-sizing: border-box;
    width: 6%;
    height: 38px;
    background-color: white;
    color: black;
    }
    #popup_box>div .danxuan{
        width: 20px;
    }
    #xgpopup_box>div .danxuan{
        width: 20px;
    }
    /* #test1>button{
        width: 35px;
        height: 35px;
        background-color:white;
        border: 1px solid black;
    } */
    #popup_box>div>div>.tishi{
      color: red;
      width: 80px;
    }
    #xgpopup_box .xgtishi{
      color: red;
      width: 80px;
    }
    #DIB{
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 2px;
            float: left;
        }
    #piLiangAndFenYe{
            margin: 10px 0;
            height: 50px;
            position: relative;
        }
    #test1{
            /* width: 200px; */
            /* height: 30px; */
            padding: 5px 10px;
            margin-top: 2px;
            /* margin-right: 10px; */
            float: right;
        }
    #test1 button{
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }
    #fenYe{
            width: 400px;
            height: 30px;
            margin-left: 1000px;
            border-style: none;
        }
    #fenYe>div{
            float: left;
        }
    #fenYe .fenyepag{
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }
    #fenYe{
            position: absolute;
            right: 10px;
        }
   #fenYe>div{
            float: right;
        }
   #tubiaofont span:first-child {
    color: blue;
    font-size: 18px;
   }  
   #tubiaofont span {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    color: gray;
}  
.cyan{
      background-color: rgb(0,150,136);
     }
    </style>
</head>
<body>
    <div id="show">
        <div id="tubiaofont">
            <span class="layui-icon layui-icon-home" ></span>
            <span >&gt;&gt;</span>
            <span>运营</span>
            <span >&gt;&gt;</span>
            <span>管理员</span>
            <!-- <span  style="font-size: 15px; ">&gt;&gt;</span>
            <span>用户名</span> -->
         </div>
        <div id="tabdiv">
            <p>管理员列表</p>
            <table><!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
               <button id="addbtn" class="layui-btn">添加管理员</button><!-- 按钮的样式 -->
               <thead>
                    <tr>
                        <th><input type="checkbox"  name="cbxALl" id="cbxAll"></th>
                        <th>ID</th>
                        <th>角色名</th>
                        <th>排序</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="glTable">
                </tbody>
            </table>
            <div id="piLiangAndFenYe" class="clear">
              <button id="DIB">批量删除</button>
              <div id="fenYe" class="clear">
                  <div>
                      <button id="pagUp" class="fenyepag">下一页</button>
                  </div>
                  <div id="test1"></div><!-- 生成分页 -->
                  <div>
                      <button id="pagDow" class="fenyepag">上一页</button>
                  </div>
              </div>
          </div>
        </div>
    </div>
    <div id="tanchukuang">

        <div id="tubiaofont">
          <span class="layui-icon layui-icon-home" ></span>
          <span >&gt;&gt;</span>
          <span>运营</span>
          <span >&gt;&gt;</span>
          <span>管理员</span>
          <span >&gt;&gt;</span>
          <span>添加管理员</span>
        </div>
        <div id="popup_box">
          <p>添加管理员 <span id="backBut">返回列表</span> </p>
    
          <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
          <div>
            <div>
              <span>角色名</span><input type="text" class="" name="" id="juesename">
              <span>排序</span><input type="text" name="" id="paixu">
            </div>
          </div>
          <button id="tijiao" class="layui-btn layui-btn-sm">提交</button>
          <button id="tjchongzhi"  class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
        </div>
      </div>
      <div id="xiugaikuang">

        <div id="xgtubiaofont">
          <span class="layui-icon layui-icon-home" ></span>
          <span >&gt;&gt;</span>
          <span>运营</span>
          <span>&gt;&gt;</span>
          <span>管理员</span>
          <span >&gt;&gt;</span>
          <span>修改管理员</span>
        </div>
        <div id="xgpopup_box">
            <p>修改管理员 <span id="xgbackBut">返回列表</span> </p>
    
            <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
            <div>
              <div>
                <span>角色名</span><input type="text" class="xgglusername" name="" id="xgjuesename">
                <span>排序</span><input type="text" name="" id="xgpaixu">
              </div>
            </div>
            <button id="xiugai" class="layui-btn layui-btn-sm">提交</button>
            <button id="xgchongzhi" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
        </div>
      </div>
    <script src="../js/jQuery.3.6.0-uncompress.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/database.js"></script>
    <script src="../js/yunying-juese.js"></script>
    <script>
        
        


        // //生成分页的事件，每页10条
        // layui.use('laypage', function(){
        // var laypage = layui.laypage;
        // //执行一个laypage实例
        //     laypage.render({
        //         elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
        //         ,count:guanliyuan.length //数据总数，从服务端得到，可直接使用数组长度
        //     });
        // });

    </script>
</body>
</html>
